<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=yes">

    <meta content="telephone=yes,email=yes" name="format-detection">
    <!--//自动识别电话号码和邮箱-->

    <meta content="yes" name="apple-mobile-web-app-capable">
    <!--//苹果手机：会删除默认的工具栏和菜单栏，网站开启对web app程序的支持-->
    <meta name="apple-mobile-web-app-status-bar-style" content="default"/>
    <!--//苹果手机：在web app应用下状态条（屏幕顶部条）的颜色,默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。-->
    <meta name="apple-touch-fullscreen" content="yes"/>
    <!--//苹果手机：如果把一个web app添加到了主屏幕中，那么从主屏幕中打开这个web app则全屏显示-->
    <link rel="apple-touch-icon" href="images/HTML5_Badge_64.png"/>
    <!--//苹果手机：将应用添加到手机主屏幕，会有一个icon可以直接进入-->
    <title>有收入</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <!--初始化样式-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/UploadImg.css">
    <!--共用样式-->
    <link rel="stylesheet" href="css/common.css">
    <!--整个网站的局部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--适配样式-->
    <link rel="stylesheet" href="css/styleMedia.css">
    <style>
        html, body {
            position: relative;
            overflow-x: hidden;
        }
        .img-row{
        	float: right;
        }
        .fileBtn {
            width: 1rem;
            height: 1rem;
            border: 0.01rem solid #d3d3d3;
            text-align: center;
            position: relative;
             left: 0rem;
            /* right: 0; */
            display: flex;
            /* top: 0; */
            /* justify-content: space-between; */
            align-items: center;
            justify-content: center;
        }
        .hide {
        	display: none;
        	height: 0;
        }
    </style>
</head>
<body style="background-color: #ffffff;">

<!--header begin-->
<header>
    <div id="flexHeader">
        <div class="div1"><a href="index.html"><img src="images/icon_arrow_left.png"></a></div>
        <div class="div2">(<span id="title">手机淘宝任务-已完成</span>-垫付)</div>
        <div class="div3"></div>
    </div>
</header>
<!--header end-->

<!--Merchant merchandise begin-->
<article class="merchant-merchandise height-padding">
    <div class="businessId">商家ID:<span>117987</span></div>
    <main>
        <div><img id="goods1Pic" src="images/img_commodity.png"></div>
        <aside>
            <div>商品目标：<span id="goodsName">平台返款</span></div>
            <div>搜索展示价格：<span id="phonePrice">129元</span></div>
            <div>数量：<span id="goods1ItemNum">1件</span></div>
        </aside>
    </main>
</article>
<!--Merchant merchandise end-->

<!--taoBao task shop notes begin-->
<article class="task-remark">
    <aside>
        <section>
            <div><img src="images/img_taobao.png"></div>
            <div>淘宝任务:<span id="status">待操作</span></div>
        </section>
        <div id="timeCount" class="time-of-submission">提交倒计时：01:50:40</div>
    </aside>
    <main>
        <div><p>商家备注(长按课选择-复制)要求:</p></div>
        <div id="remarkInfo" style="min-height: 20px;">这是一条很长很长很长很长很长很长很长很长很长很长很长很...........长的商家备注，长到冒省略号啦~</div>
    </main>
    <main>
        <div>是否需要聊天:&nbsp;&nbsp;<span style="display: inline-block;" id="needChatPic">不需要</span></div>
        
    </main>
</article>
<!--taoBao task shop notes end-->

<!--accept an assignment begin-->
<article class="accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_one.png">
            <p>接受任务</p>
        </div>
        <time id="orderCt" datetime="2018-10-20 &nbsp; 11:55:55"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>任务编号</p>
            <p id="orderId">2345254</p>
        </div>
        <div>
            <p>买号</p>
            <p id="tbName">淘宝账号</p>
        </div>
        <div>
            <p>商品金额</p>
            <p id="goods1RealPrice">670元</p>
        </div>
    </section>
</article>
<!--accept an assignment end-->

<!-- operating duty begin-->
<article class="operating-duty">
    <section class="task-top">
        <div>
            <img src="images/icon_two.png">
            <p>操作任务</p>
        </div>
    </section>
    <section class="list-img">
        <div>
            <p>货比三家</p>
            <aside>
                <img src="" class="img-row" id="searchResultPic" />                
                <img src="" class="img-row" id="anyGoodsPic1" />                
                <img src="" class="img-row" id="anyGoodsPic2" />
            </aside>
        </div>
        <div>
            <p>浏览店铺</p>
            <aside>             
                <img src="" class="img-row" id="shopGoodsPic1" />             
                <img src="" class="img-row" id="shopGoodsPic2" />             
                <img src="" class="img-row" id="targetGoodsHeaderPic" />             
                <img src="" class="img-row" id="targetGoodsFooterPic" />
            </aside>
        </div>
        <div id="chatPicContainer">
            <p>聊天</p>
            <aside>
                <img src="" class="img-row" id="chatPic" /> 
            </aside>
        </div>
        <div>
            <p>付款下单</p>
            <aside>           
                <img src="" class="img-row" id="payPic" />   
            </aside>
        </div>
    </section>
</article>
<!-- operating duty end-->

<!--Business confirmation begin-->
<article class="accept-an-assignment business-confirmation">
    <section class="task-top">
        <div>
            <img src="images/icon_three.png">
            <p>商家确认</p>
        </div>
        <time id="rebateTime" datetime="2018-10-20 &nbsp; 11:55:55"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>返款方式</p>
            <p>平台返款</p>
        </div>
        <div>
            <p>返款账号</p>
            <p></p>
        </div>
        <div>
            <p>返款金额</p>
            <p id="realPayPrice">670元</p>
        </div>
        <div class="refunds">
            <p>平台规定商家26小时内返款</p>
        </div>
        <div class="urge-refunds">
            <a id="btnRebate" href="#">催返款</a>
        </div>
    </section>
</article>
<!--Business confirmation end-->

<!--  collect-goods begin-->
<article class="operating-duty accept-an-assignment collect-goods">
    <section class="task-top">
        <div>
            <img src="images/icon_four.png">
            <p>收到好评</p>
        </div>
    </section>
    <section class="list-img">
        <div id="inrefund">
            <p>物流签收与收到好评截图</p>
            <aside>
                <img src="" class="img-row" id="receivePic" />
                <img src="" class="img-row" id="hpPic" />
            </aside>
        </div>
        <div id="refunded" class="upload-title" style="display: none;">
            <p>物流签收与收到好评截图</p>
            <article>
                <div class="fileBtn">
                    <p>+</p>
                    <input id="fileBtn010" name="files" form="upload_form" type="file" onchange="upload010();" accept="image/*"
                           multiple="multiple"/>
                    <!--单张图片容器-->
                    <img src="" id="img010"/>
                </div>
            </article>
            <article>
                <div class="fileBtn">
                    <p>+</p>
                    <input id="fileBtn011" name="files" form="upload_form" type="file" onchange="upload011();" accept="image/*"
                           multiple="multiple"/>
                    <!--单张图片容器-->
                    <img src="" id="img011"/>
                </div>
            </article>
            <form action="" method="post" id="upload_form"></form>
        </div>
    </section>
    <section class="serial-number">
        <div class="refunds">
            <p>此单为普通好评</p>
        </div>
        <div class="urge-refunds">
            <a id="btnEvaluation" href="#" style="background: #F4F4F4; color: #202020;">去评价</a>
        </div>
    </section>
</article>
<!--  collect-goods end-->

<!--Mission accomplished begin-->
<article class="mission-accomplished accept-an-assignment">
    <section class="task-top">
        <div>
            <img src="images/icon_five.png">
            <p>任务完成</p>
        </div>
        <time id="completeTime" datetime="2018-10-20&nbsp;11:55:55"></time>
    </section>
    <section class="serial-number">
        <div>
            <p>获取佣金</p>
            <p id="customerReceive">10金</p>
        </div>
    </section>
</article>
<!--Mission accomplished end-->

<!--taskTabBar begin-->
<article class="taskTabBar">
    <div id="btnOperation" style="background-color: #d3d3d3;">操作任务</div>
    <div id="appeal">申诉任务</div>
    <div id="btnCancel" style="background-color: #d3d3d3; color: #ffffff;border: 0.01rem solid #d3d3d3">取消任务</div>
</article>
<!--taskTabBar end-->

<!--js-->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/common.js"></script>
<script src="js/config.js"></script>
<script src="js/UploadImg.js"></script>
<script src="js/vconsole.min.js"></script>
<script>
	var vConsole = new VConsole()
	
	var last = 0
    
	var ORDER_STATUS = {
		TIMEOUT: -4, // 订单超时关闭
		CANCEL: -3, // 用户取消订单
		INOPERATION: 0, // 待操作
		OPERATIONING: 1, // 操作中
		INREFUND: 2, // 待返款
		INEVALUATE: 3, // 待评价
		NOTCOMPLETED: 4, // 待确认
		COMPLETED: 5, // 已完成
	}
    
	var IMAGE_TAG = {
		searchResultPic: 1, // 搜索结果页
		anyGoodsPic1: 2, // 任意商品1
		anyGoodsPic2: 3, // 任意商品2
		shopGoodsPic1: 4, // 店铺商品1
		shopGoodsPic2: 5, // 店铺商品2
		targetGoodsHeaderPic: 6, // 目标商品头部
		targetGoodsFooterPic: 7, // 目标商品尾部
		chatPic: 8, // 聊天页
		payPic: 9, // 支付页
		receivePic: 10, // 收货
		hpPic: 11, // 好评
	}
	var CURRENT_ORDER_ID
	
	$(function(){
		CURRENT_ORDER_ID = getUrlParam('orderId')
		console.log("当前面板--垫付任务id：" + CURRENT_ORDER_ID)
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/getOrderById",
			type: 'get',
			data:{orderId: CURRENT_ORDER_ID},
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				if (data.code == 200) {
					initParameter(data.data)
					initImg(data.data)
					initBtn(data.data)
				} else {
					mui.toast(data.msg)
				}
			},
			errror: function(error){
				console.log('error')
			}
		})
	})
	
	function initParameter(data) {
		var status = "";
		switch(data.status)
		{
			case ORDER_STATUS.TIMEOUT: // 超时关闭
				status = "超时关闭"
				break
			case ORDER_STATUS.CANCEL: // 用户取消
				status = "已取消"
				break
			case ORDER_STATUS.INOPERATION: // 待操作
				status = "待操作"
				break
			case ORDER_STATUS.OPERATIONING: // 操作中
				status = "操作中"
				break
			case ORDER_STATUS.INREFUND: // 待返款
				status = "待返款"
				break
			case ORDER_STATUS.INEVALUATE: // 待评价
				status = "待评价"
				break
			case ORDER_STATUS.NOTCOMPLETED: // 待确认
				status = "待确认"
				break
			case ORDER_STATUS.COMPLETED: // 已完成
				status = "已完成"
				break
			default:
			  status = ""
		}
		
		// 标题栏
		$('#title')[0].textContent = data.taskName + "-" + status
		// 商品1图片
		$('#goods1Pic')[0].src = _getImgUri(data.goods1Pic)
		// 商品名称
		$('#goodsName')[0].textContent = data.goodsName
		// 搜索价格
		$('#phonePrice')[0].textContent = data.phonePrice + "元"
		// 数量
		$('#goods1ItemNum')[0].textContent = data.goods1ItemNum + "件"
		// 状态
		$('#status')[0].textContent = status
		// 商家备注
		$('#remarkInfo')[0].textContent = data.remarkInfo
		// 是否需要聊天
		$('#needChatPic')[0].textContent = data.needChatPic ? "需要" : "否"
		// 任务编号
		$('#orderId')[0].textContent = data.orderId
		// 买家
		$('#tbName')[0].textContent = data.tbName
		// 商品价格
		$('#goods1RealPrice')[0].textContent = data.goods1RealPrice
		// 返款金额
		$('#realPayPrice')[0].textContent = data.realPayPrice
		// 获取佣金
		$('#customerReceive')[0].textContent = data.customerReceive + "金 "
		
		// 接受时间
		if (data.orderCt != null) {
			$('#orderCt')[0].textContent = data.orderCt
		}
		// 返款时间
		if (data.rebateTime != null) {
			$('#rebateTime')[0].textContent = data.rebateTime
		}
		// 完成时间
		if (data.status == ORDER_STATUS.COMPLETED && data.mt != null) {
			$('#completeTime')[0].textContent = data.mt
		}
	}
	
	function initImg(data) {
		console.log(JSON.stringify(data.needChatPic))
		if (!data.needChatPic) {
			$('#chatPicContainer').hide()
		}
		_display(data, 'searchResultPic')
		_display(data, 'anyGoodsPic1')
		_display(data, 'anyGoodsPic2')
		_display(data, 'shopGoodsPic1')
		_display(data, 'shopGoodsPic2')
		_display(data, 'targetGoodsHeaderPic')
		_display(data, 'targetGoodsFooterPic')
		_display(data, 'chatPic')
		_display(data, 'payPic')
		_display(data, 'receivePic')
		_display(data, 'hpPic')
	}
	
	function initBtn(data) {
		checkTimeCount(data)
		switch(data.status)
		{
			case ORDER_STATUS.INOPERATION: // 待操作
			case ORDER_STATUS.OPERATIONING: // 操作中
				if (last > 0) { // 是否超时
					// 激活操作按钮
					$('#btnOperation').click(function(){
						operation(CURRENT_ORDER_ID)
					})
					$('#btnOperation').removeAttr("style")
					// 激活取消任务按钮
					$('#btnCancel').click(function(){
						cancelOrder(CURRENT_ORDER_ID)
					})
					$('#btnCancel').removeAttr("style")
					$('#btnCancel').removeAttr("style")
				}
				break
			case ORDER_STATUS.INREFUND: // 待返款
				// 激活重新上传按钮
				// 激活催返款按钮
				$('#btnRebate').css("background", "#1E81D2").css("color", "#fff")
				$('#btnRebate').click(function(){
					rebate(CURRENT_ORDER_ID)
				})
				break
			case ORDER_STATUS.INEVALUATE: // 待评价
				// 激活上传评价按钮，btnEvaluation
				$('#btnEvaluation').removeAttr("style")				
				$('#btnEvaluation').click(function(){
					evaluation(CURRENT_ORDER_ID)
				})
				// 切换图片框组合
				$('#refunded').css("display", "flex")	
				$('#inrefund').css("display", "none")			
				break
			default:
			  status = ""
		}
	}
	
	function operation(id) {
		console.log('operation begin ' + id)
		$.ajax({
			url: $CONFIG.baseUrl + "/api/order/operation",
			type: 'post',
			data:{orderId: id},
			beforeSend: function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				console.log(this.url)
				window.location = "operationTask_advance.html?orderId=" + id
			},
			errror: function(error){
				console.log('error')
			}
		})
	}
	/**
	 * 取消订单
	 * @param {Object} id
	 */
	function cancelOrder(id) {
		console.log('cancel begin ' + id)
		window.location = "cancelTask.html?type=0&id=" + id
	}	
	
	$('#appeal').click(function(){
		window.location = "appealTask.html?id=" + CURRENT_ORDER_ID
	})

	function rebate(id) {
		mui.toast("已提醒商家返款，请耐心等待。")
		$('#btnRebate').removeAttr("style")
		$("#btnRebate").unbind()
	}

	function evaluation(id) {
		mui.toast("已评价，请耐心等待。")
		$("#btnEvaluation").css("background", "#F4F4F4").css("color", "#202020")
		$("#btnEvaluation").unbind()
		
		var form = document.getElementById("upload_form")
		var formdata = new FormData(form)
		formdata.append("orderId", id)
		console.log(id)
		$.ajax({
			url:$CONFIG.baseUrl+"/api/order/logisticsAndHaoping",
			type: 'post',
			data: formdata,
			contentType:false,
			processData:false,
			beforeSend:function(x){
				x.setRequestHeader("Authorization", localStorage.getItem('token'))
			},
			success: function(data){
				console.log("OK")
				plus.nativeUI.toast(data.msg)
				location.reload();
			},
			error: function(error){
				console.log('error')
			}
		})
	}

	/**
	 * 倒计时检测
	 */
	function checkTimeCount(data) {
		if (data.status == ORDER_STATUS.INOPERATION || data.status == ORDER_STATUS.OPERATIONING) {
			var t = new Date()
			var nowTime = Date.parse(t)
			var deadLineTime = Date.parse(new Date(data.orderCt)) + 1 * 1000 * 60 * 60 // 默认接单后1个小时之内
			if (deadLineTime > nowTime) { // 还未到截止时间
				last = deadLineTime - nowTime
				_count()
			} else {
				_timeout()
			}
		} else {
			$('#timeCount')[0].textContent = ""
		}
	}
	
	function _count() {
    	if (last < 0) {
    		_timeout()
    		return
    	}
		h = parseInt(last / 1000 / 60 / 60) + ':';
		m = parseInt(last / 1000 / 60 % 60) + ':';
		s = parseInt(last / 1000 % 60) ; 
		last = last-1000
		setTimeout("_count()", 1000)
		
		$('#timeCount')[0].textContent = "提交倒计时：0" + h + (m < 10 ? ("0" + m) : m ) + (s < 10 ? ("0" + s) : s)
    }

	// 显示图片
	function _display(data, imgName) {
		var imageUrl
		$.each(data.orderImageList, function(index, value) { 
			if (value.tag == IMAGE_TAG[imgName]) {
				imageUrl = value.url
			}
		})
		if (imageUrl == null) return;
		$("#" + imgName).attr("src", function() {
			$("#" + imgName)[0].style.display = 'block'
			return _getImgUri(imageUrl)
		})
	}

	function _getImgUri(img) {
		return $IMG_CONF + img
	}
	
	function _timeout() {
		$('#timeCount')[0].textContent = "提交倒计时：已超时"
		// 超时，禁用操作按钮
		$('#btnOperation').unbind()
		$('#btnOperation').css("background-color", "#d3d3d3")
		// 超时，禁用取消任务按钮 
		$('#btnCancel').unbind()
		$('#btnCancel').css("background-color", "#d3d3d3")
						.css("color", "#ffffff")
						.css("border", "0.01rem solid #d3d3d3")
		console.log("订单已超时");
		plus.nativeUI.toast("订单已超时")
	}
	mui.ready(function () {
//		mui.back(function () {
////			window.location = 'incompleteTasks_new.html'
//		})

	})
</script>

</body>
</html>